<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			table {
				border: #FFA500 solid 1px;
				width: 600px;
				border-collapse: collapse;
			}

			table th {
				border-bottom: #FFA500 solid 1px;
				background-color: antiquewhite;
				padding: 10px;
			}

			table td {
				border: #FFA500 solid 1px;
				padding: 10px;
			}
		</style>
		<script type="text/javascript">
			window.addEventListener("DOMContentLoaded", function() {
				var btn = document.querySelector("button");
				btn.addEventListener("click", function() {
					var input = document.querySelectorAll("input");
					// console.log(input[0].value);
					// console.log(input[1].value);
					var table = document.querySelector("#tab");
					for (var i = 0; i < input[0].value; i++) {
						//创建tr
						// var tr = document.createElement("tr");
						var tr = table.insertRow();
						for (var j = 0; j < input[1].value; j++) {
							//创建td
							// var td = document.createElement("td");
							var td = tr.insertCell();
							td.innerHTML = i + "*" + j;
							//把创建的td附加到tr中
							tr.appendChild(td);
						}
						table.appendChild(tr);
					}
				})
			})
		</script>
	</head>
	<body>
		<label>行:</label><input type="text" name="row" />
		<label>列:</label><input type="text" name="col" />
		<button>生成表格</button>
		<hr />
		<table id="tab"></table>

	</body>
</html>
